<html>
    <head>
        <style>
            .banner{
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .page{
                width: 200px;
                height: 200px;
                background-color: #9e9e9e;
                margin: 10px;
                display: none;
            }
            .inside{
                display: flex;
                justify-content: center;
                align-items: center;
                height: -webkit-fill-available;
            }

            #page-1{
                background-color: #89d3de;
            }
            #page-2{
                background-color: #22b6ed;
            }
            #page-3{
                background-color: #b295c5;
            }
        </style>
    </head>
    <body>
        <div class="banner">
            <div onclick="move('left')">left</div>
            <div class="page" id="page-1">
                <div class="inside">1</div>
            </div>
            <div class="page" id="page-2">
                <div class="inside">2</div>
            </div>
            <div class="page" id="page-3">
                <div class="inside">3</div>
            </div>
            <div onclick="move('right')">right</div>
        </div>
        <script>
            let pageArr = ['page-1', 'page-2', 'page-3'];
            let index = 0;
            let setBannerInterval = setInterval(() => {
                index++;
                if(index === pageArr.length){
                    index = 0;
                    document.getElementById(pageArr[pageArr.length - 1]).style.display = 'none';
                }else{
                    document.getElementById(pageArr[index-1]).style.display = 'none';
                }
                document.getElementById(pageArr[index]).style.display = 'inline';
            }, 2000);

            (function(){
                
                document.getElementById(pageArr[0]).style.display = 'inline';
                
                
            })()
            function move(type){
                //先清除轮播计时
                clearInterval(setBannerInterval)
                //将目前展示的页面隐藏
                document.getElementById(pageArr[index]).style.display = 'none';
                //处理跳转后的索引
                if(type === 'left'){
                    index--
                    if(index < 0){
                        index = pageArr.length - 1
                    }
                }else{
                    index++
                    if(index === pageArr.length){
                        index = 0
                    }
                }
                //展示跳转后的页面
                document.getElementById(pageArr[index]).style.display = 'inline';
                //重新开始计时
                setBannerInterval = setInterval(() => {
                    index++;
                    if(index === pageArr.length){
                        index = 0;
                        document.getElementById(pageArr[pageArr.length - 1]).style.display = 'none';
                    }else{
                        document.getElementById(pageArr[index-1]).style.display = 'none';
                    }
                    document.getElementById(pageArr[index]).style.display = 'inline';
                }, 2000);
            }
        </script>
    </body>
</html>